<template>
  <van-nav-bar title="首页" placeholder fixed />
  <van-notice-bar left-icon="volume-o" text="欢迎光临这个很牛逼的商店" scrollable @click="call()" />
  <!-- <van-search
    class="ssearch"
    v-model="value"
    shape="round"
    placeholder="请输入你要查询的商品"
    clearable
    @search="onSearch(value)"
  /> -->
  <van-search
    v-model="value"
    shape="round"
    label="傻狗"
    show-action
    placeholder="请输入你要查询的商品"
    @search="onSearch(value)"
  >
    <template #action>
      <div @click="onSearch(value)" class="divsearch">搜索</div>
    </template>
  </van-search>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in list" :key="item.goods_id">
        <img :src="item.img_big_logo" class="swperimg" @click="detail(item)" />
      </van-swipe-item>
    </van-swipe>
    <div class="box1">
      <div class="leftbox1">
        <div class="hot">热销折扣</div>
        <div class="go" @click="gohot()">
          去看看go
          <img
            src="https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png"
            alt=""
          />
        </div>
      </div>
      <div class="rightbox1">
        <div class="shop" v-for="item in hotarr1" :key="item.goods_id">
          <img :src="item.img_big_logo" alt="" class="imgage" @click="gohot()" />
          <p style="color: red">{{ item.current_price }}</p>
        </div>
      </div>
    </div>
    <van-row :gutter="[10, 10]" style="padding: 5px">
      <van-col span="12" v-for="item in arr" :key="item.goods_id">
        <img :src="item.img_big_logo" alt="" class="swperimg" @click="detail(item)" />
        <div class="van-multi-ellipsis--l2">名称：{{ item.title }}</div>
        <p>种类：{{ item.category }}</p>
        <p>
          价格：<span style="color: red">{{ item.current_price }}</span>
        </p>
      </van-col>
    </van-row>
  </van-list>
</template>
<script>
import { fifterreq, listreq, searchreq } from '../../api/requies'

export default {
  methods: {
    onCancel() {},
    onLoad() {
      listreq(this.current, this.pagesize).then((r) => {
        this.arr.push(...r.data.list)
      })
      this.loading = false
      if (this.current == 77) {
        this.finished = true
      } else {
        this.current++
      }
    },
    gohot() {
      this.$router.push({
        path: '/hot',
        query: { ishot: JSON.stringify(this.hotarr) }
      })
    },
    onSearch(value) {
      console.log(value)

      searchreq(value).then((r) => {
        console.log(r.data)
        this.$router.push({
          path: '/search',
          query: {
            list: JSON.stringify(r.data.list)
          }
        })
      })
    },
    call() {
      this.$router.push('/about')
    },
    //点击图片进入详情页
    detail(item) {
      this.$router.push({
        path: '/detail',
        query: { id: item.goods_id }
      })
    },
    //渲染列表
    async loadList() {
      await listreq(this.current, this.pagesize).then((r) => {
        this.arr.push(...r.data.list)

        //轮播
        this.list = r.data.list.splice(0, 4)
        //热销折扣
        this.ishot = r.data.list.is_hot
        fifterreq(this.ishot).then((r) => {
          this.hotarr = r.data.list
          this.hotarr1 = r.data.list.slice(0, 4)
        })
      })
    }
  },
  data() {
    return {
      current: 1,
      pagesize: 6,
      loading: false,
      finished: false,
      hotarr: [],
      hotarr1: [],
      ishot: [],
      list: [],
      arr: [],
      value: ''
    }
  },
  mounted() {
    this.loadList()
  }
}
</script>
<style lang="scss">
.divsearch {
  color: white;
}
.box1 {
  display: flex;
  width: 96%;
  height: 100px;
  color: #ffffff;
  flex-direction: row;
  border: 2px #ff5000 solid;
  border-radius: 20px;
  flex-wrap: nowrap;
  margin: 10px auto;
  .leftbox1 {
    background-color: #ff4714;
    display: flex;
    flex-direction: column;
    width: 150px;
    align-items: center;
    justify-content: space-evenly;
    .hot {
      font-size: 20px;
      font-weight: 600;
    }
    .go {
      background-color: #ffffff;
      color: #ff4714;
      border-radius: 20px;
      height: 20px;
      width: 80px;
      padding: 2px;
    }
  }
  .rightbox1 {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    .shop {
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 80px;
      width: 55px;
      margin-right: 5px;
      .imgage {
        width: 100%;
      }
    }
  }
}

.my-swipe .van-swipe-item {
  width: 375px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.swperimg {
  width: 100%;
  height: 200px;
}
.van-search {
  background: linear-gradient(to bottom, #ff5000, #ffffff);
}
</style>
